﻿
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
} 
<script src="~/lib/ueditor/ueditor.config.js"></script>
<script src="~/lib/ueditor/ueditor.all.js"></script>
<script src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="~/js/VueEditor.js"></script>

<div id="divForm" style="margin:2px;padding:2px;">
    <el-form :model="form" label-width="120px">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="标题" required>
                    <el-input v-model="form.title" placeholder="在此处输入标题"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="简略标题">
                    <el-input v-model="form.shortTitle" placeholder="在此处输入简略标题"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="作者" required>
                    <el-input v-model="form.author" placeholder="在此处输入作者"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="分类id" required> 
                    <el-select  v-model="form.categoryId" placeholder="请选择">
                        <el-option v-for="item in newsCategoryList"
                                   :key="item.id"
                                   :label="item.categoryName"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="来源" required>
                    <el-input v-model="form.source" placeholder="在此处输入来源"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="状态">
                    <el-radio-group v-model="form.enabled">
                        <el-radio :label='true'>启用</el-radio>
                        <el-radio :label='false'>禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="是否允许评论">
                    <el-radio-group v-model="form.allowComment">
                        <el-radio :label='true'>允许</el-radio>
                        <el-radio :label='false'>不允许</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="评论时间" required>
                    <el-row :gutter="24">
                        <el-col :span="10">
                            <el-form-item> 
                                <el-date-picker v-model="form.commentStartDate"
                                                align="right"
                                                type="date"
                                                placeholder="开始时间" >
                                </el-date-picker>
                            </el-form-item>

                        </el-col>
                        <el-col :span="10">
                            <el-form-item>
                                <el-date-picker v-model="form.commentEndDate"
                                                align="right"
                                                type="date"
                                                placeholder="结束时间" >
                                </el-date-picker> 
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="排序号" required>
                    <el-input v-model="form.orderIndex" type="number"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="关键字" required>
                    <el-input v-model="form.keyword" placeholder="在此处输入关键字"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="资讯摘要" required>
                    <el-input v-model="form.articleAbstract" placeholder="在此处输入资讯摘要"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="图片">
                    <el-input v-model="form.imageUrl"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="资讯内容" required> 
                    <ue-editor :editorcontent="form.articleContent" v-on:change="changeContent"></ue-editor>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary" @@click="SaveNews()" size="mini" v-show="pageButtons.includes('savenews')">保存</el-button>
            <el-button @@click="Back()" size="mini">返回</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    //ueditor.config.js 的serverUrl需要修改配置路径，如果不上传图片或者文件则不需要修改
    var vueNewsCategory = new Vue({
        el: '#divForm',
        data() {
            return {
                pageButtons: [],
                newsCategoryList:[],
                form: {
                    id: parseInt(getQueryString("id")||0),
                    title: "",
                    shortTtile: "",
                    categoryId: 0,
                    keyword: "",
                    articleAbstract: "",
                    articleContent: "",
                    author: "",
                    source: "",
                    allowComment: false,
                    commentStartDate:"",
                    commentEndDate: "",
                    imageUrl:"",
                    enabled:true,
                    orderIndex:0
                }
            }
        },
        created() {
            var _this = this;

            _this.GetNews();
            _this.GetNewsCategoryList();
            _this.$getMenuButtons();
        },
        methods: {
           GetNewsCategoryList() {
                  var _this = this;
                 _this.$get("@Url.Action("GetNewsCategoryList", "NewsCategory")" ).then((response) => {
                     _this.newsCategoryList = response;
                  }).catch((error) => {
                  });
            },
            changeContent: function (content) {
                this.form.articleContent = content;
            },
            GetNews() {
                var _this = this;
                _this.$get("@Url.Action("GetNews", "News")?Id="+_this.form.id ).then((res) => {
                    _this.form = res;
                    _this.defaultcheckedkeys = _this.form.parentId;
                });
            },
            SaveNews() {
                var _this = this;
                _this.form.orderIndex = parseInt(_this.form.orderIndex || 0);
                _this.$post("@Url.Action("SaveNews", "News")", _this.form).then((res) => {
                    _this.$success(res.message, function () {
                        _this.$back(true);
                    });
                });
            },
            Back() {
                this.$back();
            }
        }
    });
</script>

